<template>
    <div class="border-b border-gray-200">
        <div class="comment-item">
            <div>
                <n-image width="50" height="50"
                         :src="commentData.user.avatarUrl"></n-image>
            </div>
            <div class="w-full">
                <div class="flex w-full">
                    <span class="user-name">{{ commentData.user.nickname }} :</span>
                    <div class="comment-txt">
                        <p v-for="(item, index) in content" :key="index">{{ item }}</p>
                    </div>
                    
                    <p class="my-auto ml-auto cursor-pointer" style="color: #666666"
                       v-show="commentData.user.userId === store.state.user.uid" @click="deleteComments">删除</p>
                </div>
                <div class="flex m-4 p-1 bg-gray-100 border border-gray-300"
                     v-if="commentData.parentCommentId != 0">
                    <span class="user-name">{{ contentFloorInfo.nickname }} :</span>
                    <div class="comment-txt">
                        <p v-for="(item, index) in contentFloorContent" :key="index">{{ item }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex">
            <p class="date-time">{{ calData(commentData.time) }}</p>
            <div class="flex items-end justify-end ml-auto" style="color: #999999">
                    <span @click="setLiked(true)" class="hover:underline hover:text-black cursor-pointer"
                          v-show="!liked">点赞({{ likedCount }})</span>
                <span @click="setLiked(false)" class="hover:underline text-red-600 cursor-pointer"
                      v-show="liked">已点赞({{ likedCount }})</span>
                <span class="mx-4">|</span>
                <span @click="isShowModal" class="hover:underline hover:text-black cursor-pointer">回复</span>
            </div>
        </div>
        <n-modal v-model:show="showModal">
            <n-card style="width: 600px;" title="回复框" :bordered="false" size="huge">
                <template #header-extra> #{{ commentData.user.nickname }}</template>
                <n-input maxlength="140" show-count clearable type="textarea" v-model:value="commentContent"/>
                <template #footer>
                    <div class="flex items-center justify-center">
                        <n-button class="mr-16" @click="showModal = false">取消</n-button>
                        <n-button @click="replayComment">确认</n-button>
                    </div>
                </template>
            </n-card>
        </n-modal>
    
        <n-modal v-model:show="isLoadDing">
            <n-card style="width: 200px;" :bordered="false" size="huge">
                <div class="flex items-center justify-center">
                    <n-spin size="large" />
                </div>
            </n-card>
        </n-modal>
    
    </div>
</template>

<script>
import {NImage, NModal, NCard, NInput, NButton, NSpin, useMessage} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {doComment, getFloorComments, setCommentLiked} from "@/network/data/comment";
import {calData} from "@/util/cal";
import {useStore} from "vuex";

export default {
    name: "CommentItem.vue",
    props: {
        id: String,
        commentData: {
            type: Object,
            default: () => {
            }
        },
        commentType: Number
    },
    emits: ['refresh'],
    setup(props, {emit}) {
        const TAG = "CommentItem.comment-itemvue.vue";
        const message = useMessage();
        const store = useStore();
        const commentItemInfo = reactive({
            // 评论内容
            content: [],
            // 楼层评论信息
            contentFloorInfo: {
                nickname: ''
            },
            // 楼层评论内容
            contentFloorContent: [],
            showModal: false,
            liked: false,
            likedCount: 0,
            commentContent: '',
            isLoadDing: false
        })
        const init = () => {
            commentItemInfo.content = props.commentData.content.split('\n');
            commentItemInfo.likedCount = props.commentData.likedCount;
            commentItemInfo.liked = props.commentData.liked;
            if (props.commentData.parentCommentId != 0) {
                getFloorComments(props.commentData.parentCommentId, props.id, props.commentType).then(res => {
                    commentItemInfo.contentFloorInfo.nickname = res.data.data.ownerComment.user.nickname;
                    commentItemInfo.contentFloorContent = res.data.data.ownerComment.content.split('\n');
                }).catch(err => {
                    console.log(err);
                })
            }
        }
        onMounted(() => {
            init();
            watchEffect(() => {
                let obj = props.commentData;
                let oid = props.id;
                init();
            })
        })
        const setLiked = (flag) => {
            if (store.state.user.isLogin === false) {
                message.warning("未登录, 请登录");
                return null;
            }
            commentItemInfo.isLoadDing = true;
            if (flag === true && commentItemInfo.liked === false) {
                setCommentLiked(props.id, props.commentData.commentId, props.commentType, 1).then(res => {
                    if (res.data.code === 200) {
                        message.success("点赞成功");
                        commentItemInfo.liked = true;
                        commentItemInfo.likedCount += 1;
                    } else {
                        message.warning("点赞失败");
                    }
                })
            } else if (flag === false && commentItemInfo.liked === true) {
                setCommentLiked(props.id, props.commentData.commentId, props.commentType, 0).then(res => {
                    if (res.data.code === 200) {
                        message.success("取消点赞成功");
                        commentItemInfo.liked = false;
                        commentItemInfo.likedCount -= 1;
                    } else {
                        message.warning("取消点赞失败");
                    }
                })
            }
            commentItemInfo.isLoadDing = false;
        }
        // 显示回复框
        const isShowModal = () => {
            if (store.state.user.isLogin === false) {
                message.warning("未登录, 请登录");
                return null;
            }
            commentItemInfo.showModal = true;
        }
        // 回复评论确认时间
        const replayComment = () => {
            doComment(2, props.commentType, props.id, props.commentData.commentId, commentItemInfo.commentContent).then(res => {
                if (res.data.code === 200) {
                    message.success("回复成功");
                    setTimeout(() => {
                        emit('refresh');
                        commentItemInfo.showModal = false;
                    }, 1000)
                } else {
                    message.warning("回复失败");
                }
            })
        }
        // 删除评论, t = 0
        const deleteComments = () => {
            if (store.state.user.isLogin === false) {
                message.warning("未登录, 请登录");
                return null;
            }
            commentItemInfo.isLoadDing = true;
            doComment(0, props.commentType, props.id, props.commentData.commentId).then(res => {
                if (res.data.code === 200) {
                    message.success("删除回复成功");
                    setTimeout(() => {
                        emit('refresh');
                        commentItemInfo.isLoadDing = false;
                    }, 1000)
                } else {
                    message.warning("删除回复失败");
                }
            })
        }
        return {
            store,
            ...toRefs(commentItemInfo),
            calData,
            setLiked,
            deleteComments,
            replayComment,
            isShowModal
        }
    },
    components: {
        NImage,
        NModal,
        NCard,
        NInput,
        NButton,
        NSpin
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.comment-item {
    @apply mt-4 flex;
    .user-name {
        @apply hover:underline cursor-pointer mx-4;
        color: #0c73c2;
    }
    
    .comment-txt {
        color: #333;
        max-width: $comment-max-wid;
    }
}

.date-time {
    @apply ml-16;
    color: #999999;
}
</style>